<script setup>
import VCharts from "../../components/charts/VCharts.vue";
import {ref} from "vue";

// 柱状图
const barOption = ref({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    // 可点击
    selectedMode: true,
    data: ['注册用户'],
    bottom: 0
  },
  xAxis: [
    {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      // 不显示分割线
      splitLine: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '注册用户',
      // 显示分割线
      splitLine: {
        show: true
      }
    }
  ],
  series: [
    {
      name: '注册用户',
      type: 'bar',
      // 设置柱状图宽度
      barMaxWidth: 20,
      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
      itemStyle: {
        color: 'rgb(63,70,227)'
      }
    }
  ]
});

// 折线图配置
const lineOption = ref({
  // 显示工具栏
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['男', '女'],
    bottom: 0
  },
  xAxis: {
    type: 'category',
    data: ['篮球', '足球', '排球', '羽毛球']
  },
  yAxis: {
    type: 'value',
    name: '人数'
  },
  series: [
    {
      data: [120, 90, 200, 150],
      type: 'line',
      name: '男',
      // 平滑曲线
      smooth: true,
      itemStyle: {
        color: 'rgb(44,171,64)'
      }
    },
    {
      data: [100, 190, 20, 50],
      type: 'line',
      name: '女',
      // 平滑曲线
      smooth: true,
      itemStyle: {
        color: 'rgb(22,93,255)'
      }
    }
  ]
});

// 折柱混合
const barLineOption = ref({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    // 可点击
    selectedMode: true,
    data: ['注册用户', '累计用户量'],
    bottom: 0
  },
  xAxis: [
    {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      // 不显示分割线
      splitLine: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '注册用户',
      // 显示分割线
      splitLine: {
        show: true
      }
    },
    {
      type: 'value',
      name: '累计用户量',
      splitLine: {
        show: true
      }
    }
  ],
  series: [
    {
      name: '注册用户',
      type: 'bar',
      barMaxWidth: 20,
      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
      itemStyle: {
        color: 'rgb(63,70,227)'
      }
    },
    {
      name: '累计用户量',
      type: 'line',
      yAxisIndex: 1,// 索引从0开始
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
      itemStyle: {
        color: 'rgb(110,238,233)'
      },
      smooth: true
    }
  ]
});

// 饼图
const pieOption = ref({
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      type: 'pie',
      data: [
        {
          value: 335,
          name: '直接访问'
        },
        {
          value: 234,
          name: '联盟广告'
        },
        {
          value: 1548,
          name: '搜索引擎'
        }
      ]
    }
  ]
});
</script>

<template>
  <div>
    <v-charts style="height: 400px" title="柱状图示例" :options="barOption"/>
    <v-charts style="height: 400px" title="折线图示例" :options="lineOption"/>
    <v-charts style="height: 400px" title="折柱混合示例" :options="barLineOption"/>
    <v-charts style="height: 400px" title="饼图示例" :options="pieOption"/>
  </div>
</template>

<style scoped>

</style>